<template>
	<!-- 禁止服务器端渲染，加载会快些 -->
	<no-ssr>
		<div style="height: 100%;background-color: #fff" id="index-box">
			<!-- <div class="bg bg-blur" :style="'background-image: url('+bgImg+');'"></div> -->
			<div class="card-box2">
				<center>
					<img :src="logoImg" class="logoImg" />
					<!-- <h1 style="color: #1989FA;">信合红谷</h1> -->
				</center>
				<van-tabs class="login-form" color="#1989fa" v-model="activeName">
					<van-tab title="用户名密码登录" class="tab" name="first">
						<van-cell-group>
							<van-field class="this-input" v-model="phone" label="账号" placeholder="账号" :error="phoneErr" left-icon="manager" />
							<van-field @keyup.enter.native="login" label="密码" class="this-input" type="password" v-model="password" placeholder="密码" :error="pwErr" left-icon="lock" />
							<van-field style="display: none"></van-field>
						</van-cell-group>
						<center>
							<van-button @click="login" type="info" color="linear-gradient(to right, #4bb0ff, #1989fa)" class="btn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
							<a href="/user/apply" target="_blank">
								<van-button class="btn2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快速申请&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
							</a>
							<br />
							<p clss="tips-p">
								<font>您还没有账号？<router-link :to="{ name: 'register'}">免费注册</router-link>
								</font>
								<!-- <router-link to="/user/apply" class="apply-link" style="display: block;float: right;"><i class="el-icon-s-order"
									 style="color:#2d8cf0;line-height: 18px;font-size: 15px;">快速申请</i></router-link> -->
							</p>
						</center>
					</van-tab>
					<van-tab title="手机号快捷登录" class="tab" name="second">
						<van-cell-group>
							<van-field class="this-input" v-model="phone" label="手机号码" placeholder="手机号码" :error="phoneErr" />

							<van-field v-model="verificationCode" center clearable label="短信验证码" placeholder="请输入短信验证码">
								<van-button :disabled="btnIsDisabled" slot="button" size="small" type="info" @click="getVCode">{{VCodeText}}</van-button>
							</van-field>

							<van-field style="display: none"></van-field>
						</van-cell-group>
						<!-- <van-cell-group>
							<van-field v-model="verificationCode" center clearable label="短信验证码" placeholder="请输入短信验证码">
								<van-button :disabled="btnIsDisabled" slot="button" size="small" type="info" @click="getVCode">{{VCodeText}}</van-button>
							</van-field>
						</van-cell-group> -->
						<center>
							<van-button @click="login" type="info" color="linear-gradient(to right, #4bb0ff, #1989fa)" class="btn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
							<van-button @click="$router.push('/user/apply')" class="btn2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快速申请&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
							<p clss="tips-p">
								<font>您还没有账号？<router-link :to="{ name: 'register'}">免费注册</router-link>
								</font>
								<!-- <router-link to="/user/apply" class="apply-link" style="display: block;float: right;"><i class="el-icon-s-order"
									 style="color:#2d8cf0;line-height: 18px;font-size: 15px;">快速申请</i></router-link> -->
							</p>
						</center>
					</van-tab>
				</van-tabs>
			</div>
		</div>
	</no-ssr>
</template>

<script>
	import {
		validation
	} from './validate'
	import aes from '~/util/aes.js'
	export default {
		data() {
			return {
				bgImg:require('~/assets/img/20191017100106.jpg'),
				activeName: "first",
				phone: "",
				password: "",
				phoneErr: false,
				pwErr: false,
				verificationCode: "",
				VCodeText: "获取验证码",
				btnIsDisabled: false,
				logoImg:require('~/assets/img/20191017101604.png')
			}
		},
		created() {
			//注册过来的则设置默认手机号码
			if (this.$route.params.phone) {
				this.phone = this.$route.params.phone;
			}
		},
		methods: {
			login() {
				let that = this;
				//效验
				let validationError = '';
				if (that.activeName == "first") {
					validationError = validation({
						isPassword: true,
						phone: that.phone,
						password: that.password
					})
				} else {
					validationError = validation({
						isPassword: false,
						phone: that.phone,
						verificationCode: that.verificationCode
					})
				}
				if (validationError === '') {
					//TODO:验证通过
					let request = null;
					if (that.activeName == "first") {
						request = that.$axios.post('/api/auth/login', {
							phone: that.phone,
							password: that.password
						})
					} else {
						request = that.$axios.post('/api/consumer/codeLogin', {
							phone: that.phone,
							code: that.verificationCode
						})
					}
					request.then(res => {
						if (res.data.code == 200) {
							if (res.data.data.user.role_id == 5) { //普通用户
								that.$toast({
									message: "登录成功！",
									type: 'success'
								});
								that.$cookies.remove('agent');
								that.$cookies.set('token', res.data.data.token);
								that.$store.commit("setToken", res.data.data.token);
								that.$axios.defaults.headers.common['Authorization'] = "Bearer " + res.data.data.token;
								that.$cookies.set('user', aes.Encrypt(JSON.stringify(res.data.data.user)));
								that.$store.commit("setUser", res.data.data.user);
								if (that.$route.query.from) {
									that.$router.push(that.$route.query.from);
								} else {
									that.$router.push('/user');
								}
							} else {
								that.$toast({
									message: '您不是普通用户,无法登录！',
									type: 'fail'
								});
							}
						} else {
							that.$toast({
								message: res.data.message,
								type: 'fail'
							});
						}
					})
				} else {
					that.$toast({
						message: validationError,
						type: 'fail'
					});
				}
			},
			getVCode() {
				let that = this;
				//bug：按钮设置disabled仍能触发此点击事件，所以得确定是否禁用状态
				if (!this.btnIsDisabled) {
					if ((/^1[3456789]\d{9}$/.test(that.phone))) {
						let num = 60;
						that.btnIsDisabled = true;
						let timer = setInterval(function() {
							that.VCodeText = num + "秒后可重新发送";
							num -= 1;
							if (num < 0) {
								that.VCodeText = "获取验证码";
								that.btnIsDisabled = false;
								clearInterval(timer);
							}
						}, 1000);
						that.$axios.post('/api/captcha', {
							phone: that.phone,
							type: 2
						}).then(res => {
							if (res.data.code == 200) {
								that.$toast({
									message: "验证码发送成功！",
									type: 'success'
								});
							} else {
								that.VCodeText = "获取验证码";
								that.btnIsDisabled = false;
								clearInterval(timer);
								that.$toast({
									message: res.data.message,
									type: 'fail'
								});
							}
						})
					} else {
						that.$toast({
							message: "手机号不能为空且格式不能有误",
							type: 'warning'
						});
					}
				}
			}
		},
		mounted() {
			if (this.$route.query.from) {
				this.$toast({
					message: '您还没有登录',
					type: 'warning'
				});
			}
		}
	}
</script>

<style lang="less">
	#index-box{
		.logoImg{
			width: 300px;
			height: 100px;
			margin: 20px;
			box-sizing: border-box;
		}
	}
	.bg {
		height: 100%;
		text-align: center;
		line-height: 100%;
	}

	.bg-blur {
		float: left;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center;
		//background-size: cover;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
	}

	.card-box2 {
		font-size: 30px;
		position: absolute;
		left: 0px;
		right: 0px;
		//background-color: #f7f7d2;
		height: 100%;
		padding-top: 150px;
		overflow-y: hidden;
		box-sizing: border-box;

		.title {
			box-sizing: border-box;
			margin: 0;
		}

		.login-form {
			width: 100%;
			box-sizing: border-box;
			padding-top: 20px;

			.van-icon-manager,
			.van-icon-lock{
				color: #1989fa;
			}

			.van-tabs__wrap {
				height: 40px;

				/*no*/
				.van-tabs__nav {
					margin: 0 16px;/*no*/
					height: 40px;

					/*no*/
					.van-tab {
						line-height: 40px;
						/*no*/
					}
				}
			}

			.tab {
				margin: 20px 16px 0 16px;
				/*no*/
				padding-bottom: 40px;
				width: auto;
				border-radius: 2px;
				/*no*/

				.this-input {
					/deep/ .van-field__body{
						height: 100%;
					}

					input {
						height: 30px;
						/*no*/
					}

					span {
						line-height: 30px;
					}
				}

				.van-field__left-icon{
					line-height: 70px;
				}

				.van-cell__title.van-field__label{
					width: auto;
					margin-right: 30px;
					line-height: 70px;
				}

				.van-field__control{
					padding-left: 20px;
				}
				
			}

			.btn {
				width: 100%;
				margin-top: 200px;
			}

			.btn2 {
				width: 100%;
				margin-top: 20px;
			}
		}

		.tips-p {
			margin-top: 5px;
			line-height: 18px;
			font-size: 15px;
		}
		.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
			border-width:0;
		}
	}

	/**
	 * 闪光一过特效
	 */
	.apply-link {
		position: relative;
		margin: 0 0;
		transition-duration: .5s;
		width: 200px;
		overflow: hidden;

		i {
			width: 200px;
		}
	}


	.apply-link:before {
		content: "";
		position: absolute;
		left: -165px;
		top: -460px;
		width: 300px;
		height: 15px;
		background-color: rgba(255, 255, 255, .5);
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-animation: searchLights 2s ease-in 2s infinite;
		-o-animation: searchLights 2s ease-in 2s infinite;
		animation: searchLights 2s ease-in 2s infinite;
	}

	@-webkit-keyframes searchLights {
		0% {
			left: -50px;
			top: 0;
		}

		to {
			left: 70px;
			top: 50px;
		}
	}

	@-o-keyframes searchLights {
		0% {
			left: -50px;
			top: 0;
		}

		to {
			left: 70px;
			top: 50px;
		}
	}

	@-moz-keyframes searchLights {
		0% {
			left: -100px;
			top: 0;
		}

		to {
			left: 120px;
			top: 100px;
		}
	}

	@keyframes searchLights {
		0% {
			left: -100px;
			top: 0;
		}

		to {
			left: 120px;
			top: 100px;
		}
	}
</style>
